<template>
  <div class="manual-entry-container">
    <div>
      <div
        :class="tabType == '0' ? 'tab-top click-active' : 'tab-top'"
        @click="changeTab('0')"
      >
        个人信息
      </div>
      <div
        :class="tabType == '1' ? 'tab-top click-active' : 'tab-top'"
        @click="changeTab('1')"
      >
        教育背景
      </div>
    </div>
    <div v-show="tabType == '0'">
      <ul>
        <li>
          <span class="active">编号</span>
          <span v-if="number !='' && number != null">{{ number }}</span>
          <span v-else>--</span>
        </li>
        <li>
          <span class="active">姓名</span>
          <span v-if="name !='' && name != null">{{ name }}</span><span v-else>--</span>
          <span class="active">性别</span>
          <span v-if="sex !='' && sex != null">{{ sex }} </span><span v-else>--</span>
        </li>
        <li>
          <span class="active">民族</span>
          <span v-if="nation !='' && nation != null">{{ nation }}</span><span v-else>--</span>
          <span class="active">出生日期</span>
          <span v-if="birthDate !='' && birthDate != null">{{ birthDate }} </span><span v-else>--</span>
        </li>
        <li>
          <span class="active">籍贯</span>
          <span v-if="nativePlace !='' && nativePlace != null">{{ nativePlace }}</span><span v-else>--</span>
          <span class="active">户籍所在地</span>
          <span v-if="registeredResidence !='' && registeredResidence != null">{{ registeredResidence }} </span><span v-else>--</span>
        </li>
        <li>
          <span class="active">证件名称</span>
          <span v-if="certificate !='' && certificate != null">{{ certificate }}</span><span v-else>--</span>
          <span class="active">证件号码</span>
          <span v-if="idNumber !='' && idNumber != null">{{ idNumber }} </span><span v-else>--</span>
        </li>
        <li>
          <span class="active">政治面貌</span>
          <span v-if="politicalOutlook !='' && politicalOutlook != null">{{ politicalOutlook }}</span><span v-else>--</span>
          <span class="active">入党(团)时间</span>
          <span v-if="joiningPartyTime !='' && joiningPartyTime != null">{{ joiningPartyTime }} </span><span v-else>--</span>
        </li>
        <li>
          <span class="active">系</span>
          <span v-if="system !='' && system != null">{{ system }}</span><span v-else>--</span>
          <span class="active">教研室</span>
          <span v-if="teachingOffice !='' && teachingOffice != null">{{ teachingOffice }} </span><span v-else>--</span>
        </li>
        <li>
          <span class="active">入职时间</span>
          <span v-if="entryTime !='' && entryTime != null">{{ entryTime }}</span><span v-else>--</span>
          <span class="active">人员类别</span>
          <span v-if="personnelCategory !='' && personnelCategory != null">{{ personnelCategory }} </span><span v-else>--</span>
        </li>
        <li>
          <span class="active">办公电话</span>
          <span v-if="officeTelephone !='' && officeTelephone != null">{{ officeTelephone }}</span><span v-else>--</span>
          <span class="active">移动电话</span>
          <span v-if="mobilePhone !='' && mobilePhone != null">{{ mobilePhone }} </span><span v-else>--</span>
        </li>
        <li>
          <span class="active">技术职务</span>
          <span v-if="technicalPosition !='' && technicalPosition != null">{{ technicalPosition }}</span><span v-else>--</span>
          <span class="active">技职时间</span>
          <span v-if="technicalTime !='' && technicalTime != null">{{ technicalTime }} </span><span v-else>--</span>
        </li>
        <li>
          <span class="active">技级资格</span>
          <span v-if="technicalQualification !='' && technicalQualification != null">{{ technicalQualification }}</span><span v-else>--</span>
          <span class="active">资格时间</span>
          <span v-if="qualificationTime !='' && qualificationTime != null">{{ qualificationTime }} </span><span v-else>--</span>
        </li>
        <li>
          <span class="active">图片查看</span>
          <span style="width: calc(100% - 400px); padding-top: 0">
            <div class="img-list">
              <span v-if="pictureViewList !='' && pictureViewList != null" class="undeLine">{{ pictureViewList }}</span><span v-else>--</span>
              <!-- <div
                v-for="(item, index) in pictureViewList"
                :key="index"
                class="text"
              >
                <span class="undeLine">{{ item.text }}</span>
                <i
                  class="el-icon-circle-close del-icon"
                  @click="deletedImgInfo(item)"
                ></i>
              </div> -->
            </div>
          </span>
        </li>
        <li>
          <span style="height: 155px" class="active">备注</span>
          <span style="width: 750px; height: 155px">{{ remarks }}</span>
        </li>
      </ul>
      <div style="height: 60px"></div>
    </div>

    <div v-show="tabType == '1'">
      <ul>
        <li>
          <span class="active">本科毕业单位</span>
          <span v-if="bk_graduationUnit !='' && bk_graduationUnit != null">{{ bk_graduationUnit }}</span><span v-else>--</span>
          <span class="active">本科毕业日期</span>
          <span v-if="bk_graduationDate !='' && bk_graduationDate != null">{{ bk_graduationDate }}</span><span v-else>--</span>
        </li>
        <li>
          <span class="active">本科专业名称</span>
          <span v-if="bk_majorName !='' && bk_majorName != null">{{ bk_majorName }}</span><span v-else>--</span>
          <span class="active">本科学位名称</span>
          <span v-if="bk_degreeName !='' && bk_degreeName != null">{{ bk_degreeName }} </span><span v-else>--</span>
        </li>
        <li>
          <span class="active">硕士毕业单位</span>
          <span v-if="ss_graduationUnit !='' && ss_graduationUnit != null">{{ ss_graduationUnit }}</span><span v-else>--</span>
          <span class="active">硕士毕业日期</span>
          <span v-if="ss_graduationDate !='' && ss_graduationDate != null">{{ ss_graduationDate }} </span><span v-else>--</span>
        </li>
        <li>
          <span class="active">硕士专业名称</span>
          <span v-if="ss_majorName !='' && ss_majorName != null">{{ ss_majorName }}</span><span v-else>--</span>
          <span class="active">硕士学位名称</span>
          <span v-if="ss_degreeName !='' && ss_degreeName != null">{{ ss_degreeName }} </span><span v-else>--</span>
        </li>
        <li>
          <span class="active">博士毕业单位</span>
          <span v-if="bs_graduationUnit !='' && bs_graduationUnit != null">{{ bs_graduationUnit }}</span><span v-else>--</span>
          <span class="active">博士毕业日期</span>
          <span v-if="bs_graduationDate !='' && bs_graduationDate != null">{{ bs_graduationDate }} </span><span v-else>--</span>
        </li>
        <li>
          <span class="active">博士专业名称</span>
          <span v-if="bs_majorName !='' && bs_majorName != null">{{ bs_majorName }}</span><span v-else>--</span>
          <span class="active">博士学位名称</span>
          <span v-if="bs_degreeName !='' && bs_degreeName != null">{{ bs_degreeName }} </span><span v-else>--</span>
        </li>
      </ul>
    </div>
    <el-dialog title="提示" :visible.sync="deletedMessageDialog" width="500px">
      <div class="class-tip">您确定删除当前图片?</div>
      <span slot="footer" class="dialog-footer">
        <button class="green" @click="deletedInfo">确 定</button>
        <button
          class="yellow"
          @click="deletedMessageDialog = false"
          style="margin-left: 60px"
        >
          取 消
        </button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {bpksj_query_teacher_info, bpksj_query_edu_info}  from "@/api/trainingManagement/place.js";
export default {
  name: "workOutClass",
  data() {
    return {
      userId: "", //修改人id
      tabType: "0", //0个人信息，1:教育背景
      number: "", //编号
      name: "", //姓名
      sex: "", //性别
      nation: "", //民族
      birthDate: "", //出生日期
      nativePlace: "", //籍贯
      registeredResidence: "", //户籍所在地
      certificate: "", //证件名称
      idNumber: "", //证件号码

      politicalOutlook: "", //政治面貌
      joiningPartyTime: "", //入党(团)时间
      system: "", //系
      teachingOffice: "", //教研室
      entryTime: "", //入职时间
      personnelCategory: "", //人员类别
      officeTelephone: "", //办公电话
      mobilePhone: "    ", //移动电话
      technicalPosition: "", //技术职务
      technicalTime: "", //技职时间
      technicalQualification: "", //技级资格
      qualificationTime: "", //资格时间
      // pictureViewList: [{ text: "学历证.jpg" }, { text: "个人证件照.png" }],
      pictureViewList:"",//图片列表
      remarks: "", //备注

      bk_graduationUnit: "", //本科毕业单位
      bk_graduationDate: "", //本科毕业日期
      bk_majorName: "", //本科专业名称
      bk_degreeName: "", //本科学位名称

      ss_graduationUnit: "", //硕士毕业单位
      ss_graduationDate: "", //硕士毕业日期
      ss_majorName: "", //硕士专业名称
      ss_degreeName: "", //硕士学位名称

      bs_graduationUnit: "", //博士毕业单位
      bs_graduationDate: "", //博士毕业日期
      bs_majorName: "", //博士专业名称
      bs_degreeName: "", //博士学位名称

      deletedMessageDialog: false, //删除弹窗
    };
  },
  mounted() {
    this.userId = this.$route.query.id;
    console.log(this.userId, "userID")
    // this.userId = "1"
    this.queryBaseInfo(this.userId);
    this.queryEduInfo(this.userId);
  },
  methods: {
    async queryBaseInfo(userId) {
      const res = await bpksj_query_teacher_info(userId);
      if (res.data.code == 200) {
        this.number = res.data.data.bh; //编号
        this.name = res.data.data.xm; //姓名
        this.sex = res.data.data.xb; //性别
        this.nation = res.data.data.mz; //民族
        this.birthDate = res.data.data.csrq; //出生日期
        this.nativePlace = res.data.data.jg; //籍贯
        this.registeredResidence = ""; //户籍所在地
        this.certificate = res.data.data.zjmc; //证件名称
        this.idNumber = res.data.data.zjhm; //证件号码

        this.politicalOutlook = res.data.data.zz; //政治面貌
        this.joiningPartyTime = res.data.data.rdtsj; //入党(团)时间
        this.system = res.data.data.xb; //系
        this.teachingOffice = res.data.data.gzbm; //教研室
        this.entryTime = res.data.data.rzsj; //入职时间
        this.personnelCategory = res.data.data.lb; //人员类别
        this.officeTelephone = res.data.data.dwdh; //办公电话
        this.mobilePhone = res.data.data.yddh; //移动电话
        this.technicalPosition =res.data.data.zw; //技术职务
        this.technicalTime = res.data.data.jzsj; //技职时间
        this.technicalQualification = res.data.data.jxzg; //技级资格
        this.qualificationTime = res.data.data.zgsj; //资格时间
        this.pictureViewList = res.data.data.tp;
        this.remarks = res.data.data.bz; //备注
      }
    },
    // 获取教育信息
    async queryEduInfo(userId) {
      const res = await bpksj_query_edu_info(userId);
      if (res.data.code == 200) {
        var data = res.data.data;
        data.forEach(item => {
          if (item.stage =="本科") {
            this.bk_graduationUnit = item.graduationCompany; //本科毕业单位
            this.bk_graduationDate = item.graduationDate; //本科毕业日期
            this.bk_majorName = item.major; //本科专业名称
            this.bk_degreeName = item.degreeName; //本科学位名称
          }
          if (item.stage =="研究生") {
            this.ss_graduationUnit = item.graduationCompany; //研究生毕业单位
            this.ss_graduationDate = item.graduationDate; //研究生毕业日期
            this.ss_majorName = item.major; //研究生专业名称
            this.ss_degreeName = item.degreeName; //研究生学位名称
          }
          if (item.stage =="博士") {
            this.bs_graduationUnit = item.graduationCompany; //博士毕业单位
            this.bs_graduationDate = item.graduationDate; //博士毕业日期
            this.bs_majorName = item.major; //博士专业名称
            this.bs_degreeName = item.degreeName; //博士学位名称
          }
        });

      }
    },
    // 切换tab标签
    changeTab(val) {
      this.tabType = val;
    },
    // 删除照片
    deletedImgInfo(row) {
      // this.deletedMessageDialog = true;
    },
    // 确认删除
    deletedInfo() {
        this.deletedMessageDialog = false;
    }
  },
};
</script>

<style scoped lang="less">
.manual-entry-container {
  > div:nth-child(1) {
    display: flex;
    width: calc(100% - 20px);
    margin: 30px auto 0;
    border-bottom: 1px solid rgba(0, 76, 167, 0.8);
    .tab-top {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 150px;
      font-weight: bold;
      cursor: pointer;
      color: #004ca7;
    }
    .click-active {
      background: #004ca7;
      color: #fff;
    }
  }
  > div:nth-child(2) {
    width: calc(100% - 20px);
    height: calc(100vh - 215px);
    overflow: auto;
    border: 1px solid rgba(0, 76, 167, 0.8);
    border-radius: 6px;
    margin: 35px auto 0;
    ul {
      list-style: none;
      li {
        border-bottom: 1px solid rgba(0, 76, 167, 0.4);
        height: auto;
        > span {
          box-sizing: border-box;
          display: inline-block;
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          padding-left: 54px;
          border-right: 1px solid rgba(0, 76, 167, 0.4);
          height: 60px;
          padding-top: 20px;
          vertical-align: middle;
          &:nth-child(n) {
            width: 357px;
          }
          &:last-child {
            border-right: none;
          }
          &.active {
            font-size: 16px;
            color: rgba(0, 76, 167, 1);
            font-weight: bold;
            background: rgba(77, 129, 192, 0.1);
            text-align: center;
            padding-left: 0;
          }
          > span {
            color: red;
          }
          &.active {
              text-align: left;
              padding-left: 100px;
            }
        }
      }
      &:nth-child(1) {
        li {
          > span {
            height: 60px;
          }
        }
      }
    }
    > div {
      padding: 14px 83px;
      height: 78px;
      > div:nth-child(1) {
        font-size: 16px;
        font-weight: bold;
        color: #004ca7;
        margin-bottom: 10px;
      }
      > div:nth-child(2) {
        > span {
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          margin-right: 57px;
          > span {
            color: rgba(255, 56, 25, 1);
          }
        }
      }
    }
  }
  > div:nth-child(3) {
    width: calc(100% - 20px);
    height: 367px;
    border: 1px solid rgba(0, 76, 167, 0.8);
    border-radius: 6px;
    margin: 35px auto 0;
    ul {
      list-style: none;
      li {
        border-bottom: 1px solid rgba(0, 76, 167, 0.4);
        height: auto;
        > span {
          box-sizing: border-box;
          display: inline-block;
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          padding-left: 54px;
          border-right: 1px solid rgba(0, 76, 167, 0.4);
          height: 60px;
          padding-top: 20px;
          vertical-align: middle;
          &:nth-child(n) {
            width: 357px;
          }
          &:last-child {
            border-right: none;
          }
          &.active {
            font-size: 16px;
            color: rgba(0, 76, 167, 1);
            font-weight: bold;
            background: rgba(77, 129, 192, 0.1);
            text-align: center;
            padding-left: 0;
          }
          > span {
            color: red;
          }
        }
      }
      &:nth-child(1) {
        li {
          > span {
            height: 60px;
          }
        }
      }
    }
    > div {
      padding: 14px 83px;
      height: 78px;
      > div:nth-child(1) {
        font-size: 16px;
        font-weight: bold;
        color: #004ca7;
        margin-bottom: 10px;
      }
      > div:nth-child(2) {
        > span {
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          margin-right: 57px;
          > span {
            color: rgba(255, 56, 25, 1);
          }
        }
      }
    }
  }
  .button-group {
    text-align: center;
    margin-top: 36px;
    > div {
      display: inline-block;
      padding: 6px 20px;
      background: rgba(255, 246, 239, 1);
      border: 1px solid rgba(243, 184, 21, 1);
      border-radius: 4px;
      font-size: 18px;
      font-weight: 400;
      color: rgba(243, 184, 21, 1);
      text-align: center;
    }
  }
  .edit-icon {
    font-size: 20px;
    color: #02c86c;
    margin-left: 10px;
    cursor: pointer;
  }

  /deep/ .el-input--small .el-input__inner {
    height: 28px;
  }
}

.btn-caozuo {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 800px;
  margin: 0 auto;
  padding-top: 50px;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.body-manual-container {
  > div:nth-child(1) {
    width: 800px;
    // height: 785px;
    border: 1px solid rgba(0, 76, 167, 0.8);
    border-radius: 6px;
    margin: 70px auto 0;
    ul {
      list-style: none;
      li {
        border-bottom: 1px solid rgba(0, 76, 167, 0.4);
        height: auto;
        > span {
          box-sizing: border-box;
          display: inline-block;
          font-size: 14px;
          color: rgba(0, 76, 167, 1);
          padding-left: 54px;
          border-right: 1px solid rgba(0, 76, 167, 0.4);
          height: 60px;
          padding-top: 20px;
          vertical-align: middle;
          &:nth-child(n) {
            width: 357px;
          }
          &:last-child {
            border-right: none;
          }
          &.active {
            font-size: 16px;
            color: rgba(0, 76, 167, 1);
            font-weight: bold;
            background: rgba(77, 129, 192, 0.1);
            text-align: center;
            padding-left: 0;
          }
          &.active {
              text-align: left;
              padding-left: 100px;
            }
          > span {
            color: rgba(255, 56, 25, 1);
            &.active {
              text-align: left;
              padding-left: 100px;
            }
          }
        }
      }
    }
  }
}
.undeLine {
  text-decoration: underline;
  cursor: pointer;
  color: #004ca7;
}
.img-list {
  width: 100%;
  display: flex;
  height: 100%;
  align-items: center;
  .text {
    margin: 10px;
    display: flex;
    align-items: center;
  }
}
.del-icon {
  color: #ff492e;
  font-size: 20px;
  margin-left: 10px;
  cursor: pointer;
  margin-top: 2px;
}

.class-tip {
  color: #004ca7;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 40px;
}
</style>
